<template>
    <el-container>

    <el-main>
        <div class="input">
        <textarea v-model="msg" style="height:200px;width:600px;"></textarea>
        <div style="margin-top: 3%;" >
        <el-button @click="getBookContent">转换json</el-button></div>
        
        </div>

        <div class="prediv" v-show = "is_done">
            <!-- <pre style="margin-left: 10%">{{ JSON.stringify(test, null, 4)  }}</pre> -->
            <json-viewer :value="test" :expand-depth=6 copyable boxed sort></json-viewer> 
        </div>
        
    </el-main>
  
    </el-container>
</template>

<script>
import {urlEncode,urlDecode} from '../../js/index';
export default {
    name: 'StrTojson',
    data() {
      return {
        test : {},
        msg:"",
        is_done:false
      }
    },
    mounted() {
        // this.getBookContent()
    },
    methods: {
        getBookContent() {
            var destr = urlDecode(this.msg)
            this.test = JSON.parse(destr);//将json字符串转换成json对象
            this.is_done = true;
        }
    }//methods
}
</script>

<style type="text/css">
    .input{
        text-align: center;
        /*margin-left: 10%;*/
    }
    .prediv{
        /*height: 1000px;
        width: 1000px;*/
        /*text-align: center;*/
        height: auto;
        width: auto;
        background: #F0EFF2;
        margin-top: 10%;
        margin-left: 10%;
    }
</style>

